<template>
    <div class="cps-view">
        <div :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled1'">
            <div class="" :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled2'">
                <div class="content-view">
                    <div class="left-lay">
                        <div class="left-title" v-for="(item, index) in leftTitles" :key="index">
                            <div class="" style="justify-content: flex-start">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                    <div class="right-lay">
                        <div class="right-column" v-for="(item, index) in rightColumnData" :key="index">
                            <div class="right-row item-title">
                                <div class="ipt text bold">
                                    {{ item.fluidtit }}
                                </div>
                            </div>
                            <div class="right-row item-title"
                                v-for="(sitem, sindex) in allData.topTabList[index].topChlidList" :key="sindex + '#'">
                                <el-input v-model="sitem.flowData" class="ipt" v-if="sindex == 0"
                                    @input="sitem.flowData = $setMaxLength(sitem.flowData, 50)"></el-input>

                                <div class="right-row item-title"
                                    v-else-if="Object.keys(mComboxData).includes(`${sitem.commNo}`) && sindex != 0">
                                    <el-select v-model="sitem.flowData" class="ipt" placeholder=" ">
                                        <el-option v-for="sitem in mComboxData[sitem.commNo]" :key="sitem.key"
                                            :label="sitem.label" :value="sitem.label">
                                        </el-option>
                                    </el-select>
                                </div>

                                <el-input v-model="sitem.flowData" class="ipt" v-else
                                    @input="sitem.flowData = $setMaxLength(sitem.flowData, 50)"></el-input>

                            </div>

                            <div class="right-row item-title">
                                <div class="ipt text bold">
                                    {{ item.lowerLimit }}
                                </div>

                                <div class="ipt text bold">
                                    {{ item.upperLimit }}
                                </div>
                            </div>

                            <div class="right-row item-title"
                                v-for="(sitem, sindex) in allData.lastTabList[index].lastChlidList" :key="sindex">
                                <el-input v-model="sitem.leftVal" class="text-right ipt text samll"
                                    @input="sitem.leftVal = addLimitation(sitem.leftVal)"></el-input>
                                <el-input v-model="sitem.rightVal" class="text-right ipt text samll"
                                    @input="sitem.rightVal = addLimitation(sitem.rightVal)"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import EventBus from "@/eventBus/bus";
import { getFluidColumns, getFluidTabData, getFluidCombox } from "@/api/api";
import { getLocalStorage } from "../../../utils/storage";
import _ from 'lodash-es';
export default {
    name: "FluidPressureCps",
    data() {
        let _self = this;
        return {
            userData: getLocalStorage('userData'),
            value: "",
            options: [],
            optionsValue: "",

            leftTitles: [],

            rightColumnData: [],

            mComboxData24: [],
            mComboxData25: [],
            mComboxData27: [],
            mComboxData40: [],
            mComboxData: {},

            lastTableLineSum: 0,
            allData: [],
            allDataClone: [],
        };
    },
    components: {},
    watch: {
        macNamebValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.initFn();
            },
        },
        rightColumnData: {
            deep: true,
            handler: function (newV, oldV) {
                console.log(newV, oldV)
                try {
                    newV.forEach((a, v) => {
                        for (let key in a) {
                            let item = a[key] ? a[key] : '';
                            if (item.substr(0, 1) == ".") {
                                a[key] = `0${a[key]}`;
                            }
                        }
                    })
                } catch (error) {
                    console.log(error);
                }
            },
        },
        allData: {
            deep: true,
            handler: function (newV, oldV) {
                this.$emit('DataChangeFn', !_.isEqual(this.allData, this.allDataClone))
            },
        },
    },
    computed: {
        macNamebValue() {
            return this.$store.state.macNameb;
        },
    },
    methods: {
        // 限制字符20   数字 8，3
        addLimitation(item) {
            if (isNaN(item)) {
                return this.$setMaxLength(item, 20)
            }
            if (!isNaN(item)) {
                let arr = [5, 3];
                if (arr[1] == 0 && item.toString().indexOf('.') != -1) {
                    item = item.toString().substr(0, item.toString().length - 1)
                }
                if (item.toString().indexOf('.') == -1) {  //没有小数点
                    if (item.toString().length > arr[0]) {
                        item = item.toString().substr(0, arr[0]);
                    }
                } else {
                    try {
                        let testArr = item.toString().split('.');
                        item = `${testArr[0].substr(0, arr[0])}.${testArr[1].substr(0, arr[1])}`
                    } catch (error) {
                        console.log(error);
                    }
                }
                return item
            }
        },
        initFn() {
            this.getFluidComboxApi();
            this.getFluidColumnsApi();
            this.getFluidTabDataApi();
        },
        async getFluidComboxApi(inMacName) {
            console.log("fluid --- getFluidComboxApi");
            let dataJson = {
                type: 1,
                CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,
                CtgName: 0,
                pltCode: this.$store.state.pltCode,
                macType: this.$store.state.macType,
                macNumb: this.$store.state.macNameb,
                macName: inMacName ? inMacName : this.$store.state.macName,
            };

            let res = await getFluidCombox(dataJson)
            console.log("fluid --- getFluidCombox --- ", res);

            this.mComboxData24 = res.data.data["24"];
            this.mComboxData25 = res.data.data["25"];
            this.mComboxData27 = res.data.data["27"];
            this.mComboxData40 = res.data.data["40"];
            this.mComboxData = res.data.data;

        },

        async getFluidColumnsApi(inMacName) {
            console.log("fluid --- getFluidColumnsApi");
            // 1.Type(int): 1=正常模式，获取数据。 2=获取初始化数据。 ----这个你先传1,2在后边追加时候使用。
            // 2.CtgCode(int) 种类Code，你暂时传0，追加时候会有一个
            // 3.CtgName(string)种类名称，同上，暂时传空""。
            let dataJson = {
                type: 1,
                CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,
                CtgName: 0,
                pltCode: this.$store.state.pltCode,
                macType: this.$store.state.macType,
                macNumb: this.$store.state.macNameb,
                macName: inMacName ? inMacName : this.$store.state.macName,
            };
          
            let res = await getFluidColumns(dataJson)
            this.rightColumnData = res.data.data;
            try {
                this.rightColumnData.forEach((a, v) => {
                    for (let key in a) {
                        let item = a[key] ? a[key] : '';
                        if (item.substr(0, 1) == ".") {
                            a[key] = `0${a[key]}`;
                        }
                    }
                })
            } catch (error) {
                console.log(error);
            }
            this.getFluidTabDataApi();
            this.getFluidComboxApi();

        },

        async getFluidTabDataApi(type = 1) {
            console.log("fluid --- getFluidTabDataApi");
            // 1.Type(int): 1=正常模式，获取数据。 2=获取初始化数据。 ----这个你先传1,2在后边追加时候使用。
            // 2.CtgCode(int) 种类Code，你暂时传0，追加时候会有一个
            // 3.CtgName(string)种类名称，同上，暂时传空""。
            // debugger
            let dataJson = {
                type,
                CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,
                CtgName: 0,
                pltCode: this.$store.state.pltCode,
                macType: this.$store.state.macType,
                macNumb: this.$store.state.macNameb,
                MacName: this.$store.state.macName || ''
            };
          
            let res = await getFluidTabData(dataJson);
            if (res.data.code != 0) {
                this.lastTableLineSum = 0;
                return;
            }

            this.allData = _.cloneDeep(res.data.data);
			this.allDataClone = _.cloneDeep(res.data.data);
            this.$emit('DataChangeFn', false)
           
            this.leftTitles = [
                "",
                // this.$t("message.BSCps.fluidPressureCps.label_1"),
                // this.$t("message.BSCps.fluidPressureCps.label_2"),
                // this.$t("message.BSCps.fluidPressureCps.label_3"),
                // this.$t("message.BSCps.fluidPressureCps.label_4"),
                // this.$t("message.BSCps.fluidPressureCps.label_5"),
                // "",
            ];
            this.allData.topTabList[0].topChlidList.forEach((item) => {
                this.leftTitles.push(item.flowEntry)
            })
           
            if (res.data.data.lastTabList.length > 0) {
                let colFirstData = res.data.data.lastTabList[0];
                // res.data.data.topTabList[0].topChlidList.forEach((e) => {
                //     this.leftTitles.push(`${e.fluidtit} ${e.unit}`);
                // });
                this.leftTitles.push('')
                colFirstData.lastChlidList.forEach((e) => {
                    this.leftTitles.push(`${e.fluidtit} (${e.unit})`);
                });

                this.lastTableLineSum = colFirstData.lastChlidList.length;
            }

            console.log(this.rightColumnData);
            this.rightColumnData = JSON.parse(
                JSON.stringify(this.rightColumnData)
            );
        },
    },
    created() {
        this.initFn();
    },
    mounted() {
        EventBus.$on("clickRightTable", (val) => {
            this.initFn();
        });
    },
    beforeDestroy() {
        EventBus.$off("clickRightTable");
    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.cps-view {
    // position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid #d3d3d3;
    max-height: calc(100% - 41px);
    overflow-y: auto;

    .content-view {
        height: 608px;
        width: 1004px;
        // max-height: calc(100%);
        // overflow: auto;
        // padding: 5px 0 0 10px;
        // box-sizing: border-box;
        // height: 100%;
        display: flex;
        flex-direction: row;


        width: 1004px;
        padding: 16px 16px 0 16px;

        .left-lay {
            width: 180px;
            //     height: 710px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-shrink: 0;

            .left-title {
                width: 100%;
                text-align: left;
                font-weight: bold;
                height: 32px;
                line-height: 32px;
                margin: 6px 0px;
                flex-shrink: 0;
            }
        }

        .right-lay {
            width: calc(100% - 180px);
            height: 710px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            flex-shrink: 0;

            .right-column {
                flex-shrink: 0;
                width: 50%;
                padding-right: 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;

                .right-row {
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    margin: 6px 0px;
                }
            }
        }
    }

    .footer {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 10px 0 0 0;

        button {
            width: 82px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #d9d9d9;
            text-align: center;
            line-height: 32px;
            margin-right: 16px;
        }

        .okBTn {
            background: #106ebe;
            color: #fff;
        }
    }

    .item-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .text {
            color: #1f2329;
            display: flex;
            align-content: center;
            justify-content: center;
            line-height: 32px;
        }

        .label {
            width: 95%;
            text-align: left;
            height: 32px;
            line-height: 32px;
        }

        .ipt {
            width: 95%;
            height: 32px;

            //     margin-right: 20px;
            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .samll {
            width: 90%;

            //     padding: 0px 4px;
            ::v-deep .el-input__inner {
                width: 90%;
                height: 32px;
            }
        }

        .orange {
            ::v-deep .el-input__inner {
                background: #ffdeac;
            }
        }

        .yellow {
            ::v-deep .el-input__inner {
                background: #ffffe1;
            }
        }

        .bold {
            font-weight: bold;
        }

        .text-right {
            ::v-deep .el-input__inner {
                text-align: right;
            }
        }

        .text-left {
            ::v-deep .el-input__inner {
                text-align: left;
            }
        }
    }
}
</style>
